<template>
	<view class="interaction-contentt">
		<view class="header-content">
			<!--直播组件-->
			<view class="video-content">
				<live-player
					id="livePlayerContext"
					class="video"
					:src="livePushInfo.livePlayUrl"
					mode="live"
					autoplay
					object-fit="contain"
					@statechange="liveStateChange"
				>
					<!-- 直播倒计时 南京 -->
					<cover-view v-if="showClock" class="top-right">
						上课倒计时 {{clockStr}}
					</cover-view>
					<cover-view v-if="showStatus" class="bottom-left">
						<cover-view class="cover"></cover-view>
						<cover-view class="text">{{statusMsg}}</cover-view>
					</cover-view>
					<!-- 直播已结束 -->
					<cover-view class="cover-view end-container" :style="{backgroundColor: theme.primary}" v-if="isEnd">
						<cover-view>直播已结束</cover-view>
						<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
					</cover-view>
					<!-- 直播尚未开始 -->
					<cover-view class="cover-view" :style="{backgroundColor: theme.primary}" v-if="isError">
						<cover-view>直播课程尚未开始...</cover-view>
						<cover-view class="cover-inner resume" :style="{backgroundColor: theme.success}" @tap="resume">刷新</cover-view>
						<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
					</cover-view>
					<!-- 加载中 -->
					<cover-view class="cover-view" :style="{backgroundColor: theme.primary}" v-if="isWaiting">
						<cover-view>加载中</cover-view>
						<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
					</cover-view>
					<!-- 退出 -->
					<cover-image v-if="!isError && !isWaiting" src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
				</live-player>
			</view>
			<view class="class-info">
				<view class="title">{{ courseName }}</view>
				<view class="opt-btn">
					<!-- 下课按钮 -->
					<view class="end-btn" :style="{backgroundColor: `${isEnd?theme.success:theme.danger}`}" @tap="endCourse">{{`${isEnd?'恢复':'下课'}`}}</view>
					<!-- 发起投票按钮 -->
					<view class="vote-btn" :style="{backgroundColor: theme.warningLight}" @tap="beginVote" :disabled="isVote">课情反馈</view>
					<jIcon name="icon-fullscreen" size="50" @click="fullScreen"></jIcon>
				</view>
			</view>
			<!--全体禁言按钮-->
			<view class="opt-area">
				<button 
				:style="{
					borderColor: getStatus(button.type), 
					color: getStatus(button.type)
				}" 
				plain="true" 
				:disabled="button.disabled" 
				@tap="banChat">
					{{button.text}}
				</button>
			</view>
			<!--tab栏部-->
			<tui-tabs
				:isFixed="false" 
				:sliderWidth="180" 
				:tabs="tabs" 
				:unlined="true" 
				:currentTab="currentTab" 
				:color="theme.danger"
				:selectedColor="theme.danger"
				:sliderBgColor="theme.danger"
				@change="change">
			</tui-tabs>
		</view>
		<!--互动明细部-->
		<view v-if="currentTab == 0" class="chat-container" @touchstart="canScroll = false">
			<view v-if="!canScroll && !showInput" class="refresh-btn" @tap.stop="goBottom">
				<image class="down-icon" src="../../static/icon/down.png"></image>
			</view>
			<mescroll-uni @init="mescrollInit" :fixed="false" :up="upOption" :down="downOption" class="chat-content">
				<view class="chat-item" v-for="(item, index) in chatList" :key="index">
					<view  v-if="item.userId == 'system'" class="system-info">
						<view class="title">
							<text class="nickName" :style="{color: theme.danger}">{{item.nickName}}</text>
							<text class="dateTime">{{item.dateTime}}</text>
						</view>
						<view class="text-container">{{item.content}}</view>
					</view>
					<view v-else>
						<view class="user-info" :class="item.position">
							<view class="nickName">
								<span v-if="item.userId == 'teacher'" :style="{backgroundColor:theme.warning}">教师</span>
								{{ item.nickName }}
							</view>
							<view class="dateTime">{{ item.dateTime }}</view>
						</view>
						<view class="text-container" :class="item.position">
							<view class="arrow" :class="item.position" :style="{borderBottomColor: `${item.position == 'left'?theme.common:theme.success}`}"></view>
							<text class="text" :class="item.position" :style="{backgroundColor: `${item.position == 'left'?theme.common:theme.success}`}">{{ item.content }}</text>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<view v-if="currentTab == 0" class="foot">
			<view 
				class="input-placeholder" 
				:class="{ hidden: showInput, reject: !allow }" 
				@tap="goToComment">
				{{ input_placeholder }}
			</view>
			<chat-input 
				:class="{ hidden: !showInput }" 
				@send-message="send_comment" 
				:show="showInput" 
				:maxLen="50" 
				@blur="blur" 
				:focus="focus" 
				:placeholder="input_placeholder">
			</chat-input>
		</view>
		<!--签到明细部-->
		<view v-if="currentTab == 1">
			<mescroll-uni @init="mescrollInit" :fixed="false" :up="upOption" :down="downOption" class="check-content">
				<view class="check-title">
					<rich-text :nodes="subUnCheckTitle(unCheckData.studentCount)"></rich-text>
				</view>
				<view class="check-item">
					<view v-for="(item, index) in unCheckData.list" :key="index" class="mescroll-col">
						<view class="mescroll-item">{{subText(item.studentName, 15)}}</view>
					</view>
				</view>
				<view class="check-title">
					<rich-text :nodes="subCheckTitle(checkData.studentCount)"></rich-text>
				</view>
				<view class="check-item">
					<view v-for="(item, index) in checkData.list" :key="index" class="mescroll-col">
						<view class="mescroll-item">{{subText(item.studentName, 15)}}</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<!-- 投票面板 -->
		<cover-view class="vote-panel" v-if="isVote">
			<cover-view class="panel-tip">
				<cover-view class="tip-content">
					距离投票结束还有<cover-view class="tip-time">{{currentTime}}秒</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="panel-area">
				<cover-view class="panel-item" v-for="(item, index) in voteInfo" :key="index">
					<cover-view class="slider-label">{{item.voteItemName}}</cover-view>
					<cover-view class="slider-count">{{item.count || 0}}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from 'mescroll-uni/mescroll-mixins.js';
	import tuiTabs from '../../components/tui-tabs/tui-tabs.vue'
	import chatInput from '@/components/im-chat/chatinput.vue';
	import { NJJLLNDX } from '@/dxType.js'; // 学校枚举
	import webSocket from '@/util/socketApi/index.js'; // web socket
	import { mapState } from 'vuex'; // store 数据
	import chatMixin from './mixin/chatMixin.js'; // 评论互动
	import voteMixin from './mixin/voteMixin.js'; // 投票
	import checkInMixin from './mixin/checkInMixin.js'; // 签到
	import startEndCourseMixin from './mixin/startEndCourseMixin.js'; // 上下课
	import commonMixin from './mixin/commonMixin.js'; // 杂项
	import banChatMixin from './mixin/banChatMixin.js'; // 禁言回复
	export default({
		mixins:[
			MescrollMixin, 
			commonMixin, 
			chatMixin, 
			voteMixin, 
			checkInMixin, 
			startEndCourseMixin,
			banChatMixin
		],
		components:{
			tuiTabs,
			MescrollUni,
			chatInput,
		},
		data(){
			return{
				theme: this.$theme,
				socket: '',
				//页面id
				id: '',
				// 班级id
				classId: '',
				// 播放器实例
				livePlayer: null,
				//直播中断标记
				isError: false,
				//直播加载标记
				isWaiting: true,
				//推流数据
				livePushInfo:{},
				//课程名
				courseName: '',
				// 是否显示直播状态
				showStatus: '',
				// 直播状态信息
				statusMsg: '',
				//拉流数据拷贝
				bkLivePlayerUrl: ''
			}
		},
		computed:{
			...mapState({
				appid: state=>state.common.appid,
				teacherName: state=>state.user.user,
				clientUserId: state=>state.user.teacherId,
				socketUrl: state=>state.common.socketUrl
			})
		},
		onLoad(e) {
			this.livePlayer = wx.createLivePlayerContext('livePlayerContext')
			this.id = e.Id
			this.initData();
		},
		onUnload() {
			this.socket.closeSocket();
		},
		methods:{
			//初期化数据列表
			initData(){
				//请求推流数据
				this.getLivePushInfo(this.id).then(resp=>{
					//获取推流数据
					this.livePushInfo = resp.result
					this.bkLivePlayerUrl = resp.result.livePlayUrl;
					//uni头部title设定
					uni.setNavigationBarTitle({
					　　title:resp.result.courseName
					})
					this.courseName = resp.result.courseName
					this.classId = resp.result.channelClassId
					this.clockTime = resp.result.clockTime // 倒计时
					this.showStatus = true;
					this.statusMsg = '正在寻找直播间...'
					this.initSocket()
				})
				//异常
				.catch(err=>{
					this.isError = true
					this.btnErr();
				})
				.finally(_=>{
					if(NJJLLNDX.appid == this.appid){
						this.setClock();
					}
				})
			},
			// socket初始化
			initSocket(){
				this.socket = webSocket;
				let wssUrl = `${this.socketUrl}ws?classid=${this.classId}&itemid=${this.id}&userId=teacher|${this.clientUserId}`;
				this.socket.openSocket(wssUrl)
				this.socket.onSocketMessage(resp=>{
					this.switchData(resp);
				})
				this.socket.onSocketOpen(resp=>{
					console.info(resp);
				})
				let that = this;
				this.socket.onSocketError(resp=>{
					setTimeout(()=>{
						that.socket.openSocket(wssUrl);
					}, 5000)
				})
				this.socket.onSocketClose(resp=>{
					console.log(resp)
				})
			},
			// 区分处理
			switchData(e){
				switch(e.messageType){
					case 1: this.appendChatList(e.data); break; // 互动
					case 2: this.getVoteInfo(e.data); break; // 投票数据
					case 3: this.getCheckIn(e.data); break; // 签到
					case 4: this.getEndInfo(e.data); break; // 下课
					case 5: this.getAllowSpeach(e.data); // 禁言
				}
			},
			// 评论
			send_comment(message) {
				this.socket.sendSocketMessage('0001', {
					Id: this.Id,
					ClassId: this.classId,
					NickName: this.teacherName,
					Content: message.content,
					UserId: 'teacher'
				}).then(resp=>{
					this.init_input();
				})
			},
			//tab选择项目变更，如果是签到tab和服务端签发签到数据请求
			change(e){
				this.currentTab = e.index;
				// 互动tab
				if(e.index == 0){
					this.socket.sendSocketMessage('0003', {
						id: this.id,
						isReq: false
					})
				}
				// 签到tab
				else if(e.index == 1){
					this.socket.sendSocketMessage('0003', {
						id: this.id,
						isReq: true
					})
				}
			},
			//直播状态变更
			liveStateChange(e) {
				let code = e.detail.code;
				uni.hideLoading();
				if(code == 2001){
					this.statusMsg = `CODE: ${code} 连接中, 等待进入`;
				}
				if(code == 2003){
					this.isError = false;
					this.isWaiting = false;
					this.statusMsg = `CODE: ${code} 连接成功, 进入直播间`;
					setTimeout(()=>{
						this.showStatus = false;
					}, 1000);
				}
				//error
				else if(code == -2301 || code > 3001){
					this.isError = true;
					this.isWaiting = false;
					this.statusMsg = `CODE: ${code} 啊哦.. 没有连接到直播间`;
					setTimeout(()=>{
						this.showStatus = false;
					}, 1000);
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	button {
		font-size: 25rpx;
	}
	
	.interaction-contentt{
		overflow: hidden;
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #eaeef1;
		.chat-container{
			width: 100%;
			border-top: 1px solid #c0c0c0;
			flex: 1;
			overflow: auto;
			display: flex;
			justify-content: center;
			background: #eaeef1;
			
			@keyframes fade-in{
				from{opacity: 0;}
				to{opacity: .3;}
			}
			.refresh-btn{
				position: fixed;
				bottom: 230rpx;
				right: 22rpx;
				background-color: #000;
				opacity: .3;
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				animation: fade-in .5s;
				z-index: 9;
				.down-icon{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		
		
		.header-content{
			height: 49vh;
			position: relative;
			background-color: #fff;
		}
		.hidden-btn{
			display: none;
		}
		.image-btn{
			position: absolute;
			right: 50rpx;
			bottom: 50rpx;
			width: 55rpx;
			height: 55rpx;
		}
		.video-content{
			height: 30vh;
			.video{
				width: 100%;
				height: 100%;
				position: relative;
			}
		}
		
		/* 倒计时时钟 */
		.top-right, .bottom-left{
			position: absolute;
			font-size: 30rpx;
			letter-spacing: 2rpx;
			color: #fff;
			z-index: 999;
		}
		.top-right{
			right: 10rpx;
			top: 10rpx;
		}
		.bottom-left{
			bottom: 0;
			left: 0;
			right: 0;
			padding: 10rpx;
			box-sizing: border-box;
			.cover{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: #000;
				opacity: .4;
			}
			.text{
				font-size: 25rpx;
				color: #fff;
				z-index: 1;
			}
		}
		
		.class-info {
			width: 95%;
			height: 8vh;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
			.title {
				flex-basis: 50%;
				flex-grow: 0;
				flex-shrink: 0;
				overflow: hidden;
				text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
				display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 1; /* 文本需要显示多少行 */
			}
			.opt-btn{
				flex-basis: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.end-btn{
					font-size: 30rpx;
					width: 120rpx;
					padding: 6rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					color: #fff;
					transition: background-color .3s;
					margin-right: 20rpx;
				}
				.vote-btn{
					font-size: 30rpx;
					width: 150rpx;
					padding: 6rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					color: #fff;
					transition: background-color .3s;
					margin-right: 20rpx;
				}
				.fullScreen {
					padding: 2px 5px;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
				}
			}
		}
		
		@keyframes show-vote{
			from{transform: scale(0);}
			to{transform: scale(1);}
		}
		.vote-panel{
			width: 80vw;
			height: 60vw;
			background-color: #fff;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			position: absolute;
			top: 30%;
			left: 10%;
			animation: show-vote .5s;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 0 10rpx;
			z-index: 999;
			.close-btn{
				position: absolute;
				top: 15rpx;
				right: 15rpx;
				width: 30rpx;
				height: 30rpx;
				.close-line1{
					width: 5rpx;
					height: 30rpx;
					background-color: #5a5a5a;
					position: absolute;
					top: 0;
					left: 48%;
					transform: rotate(45deg);
				}
				.close-line2{
					width: 5rpx;
					height: 30rpx;
					background-color: #5a5a5a;
					position: absolute;
					top: 0;
					left: 48%;
					transform: rotate(-45deg);
				}
			}
			.panel-tip{
				font-size: 30rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				padding: 20rpx 0;
				.tip-content{
					display: flex;
					color: #545454;
					font-size: 30rpx;
					.tip-time{
						font-weight: bold;
						color: #232323;
					}
				}
			}
			.panel-area{
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				.panel-item{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 20rpx 50rpx;
					.slider-label{
						width: 100rpx;
					}
					.slider-count{
						font-size: 25rpx;
						color: #626262;
						margin-left: 20rpx;
					}
				}
			}
			.end-button{
				width: 60%;
				background-color: #4cd964;
				border-radius: 10rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #fff;
				padding: 10rpx 0;
				text-align: center;
				padding: 10rpx 0;
				margin: 20rpx 0;
			}
		}
		
		.cover-view {
			width: 100%;
			height: 100%;
			color: #f8f8f8;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			.cover-inner {
				display: flex;
				align-items: center;
				padding: 5px 10px;
				margin-top: 10px;
				&.resume {
					display: inline-block;
					width: 80rpx;
					color: #f1f1f1;
					border-radius: 5px;
				}
			}
			&.end-container{
				z-index: 998;
			}
		}
		.opt-area{
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-sizing: border-box;
			height: 5vh;
			margin-bottom: 2vh;
			button{
				border-radius: 10rpx;
				width: 95%;
				letter-spacing: 5rpx;
			}
		}
		.chat-content {
			box-sizing: border-box;
			padding: 0 10rpx 10rpx 10rpx;
			flex: 1;
			overflow: auto;
			display: flex;
			justify-content: center;
			background: #eaeef1;
			position: absolute;
			top: 49vh;
			bottom: 5vh;
			left: 0;
			right: 0;
			.chat-item {
				width: 100vw;
				padding: 8rpx 0;
				font-size: 34rpx;
				display: flex;
				flex-direction: column;
				.system-info{
					width: 100%;
					text-align: center;
					padding: 0 90rpx;
					box-sizing: border-box;
					.title{
						margin: 10rpx 0;
						.nickName{
							font-size: 30rpx;
							margin: 10rpx;
						}
						.dateTime{
							font-size: 25rpx;
							margin-right: 10rpx;
						}
					}					
					.text-container{
						font-size: 30rpx;
					}
				}
				
				.user-info {
					display: flex;
					align-items: center;
					&.right {
						justify-content: flex-end;
					}
					.avatar {
						width: 50rpx;
						height: 50rpx;
						flex-shrink: 0;
						.avatar-img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.nickName,
					.dateTime {
						font-size: 26rpx;
						padding-left: 10rpx;
					}
					.dateTime {
						flex: 0;
					}
					.nickName {
						overflow: hidden;
						text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
						display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
						-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
						-webkit-line-clamp: 1; /* 文本需要显示多少行 */
						span{
							padding: 10rpx;
							border-radius: 10rpx;
							font-size: 26rpx;
							color: #fff;
							margin-right: 10rpx;
						}
					}
				}
				.text-container {
					display: flex;
					flex-direction: column;
					padding: 0 10rpx;
					box-sizing: border-box;
					&.left {
						align-items: flex-start;
					}
					&.right {
						align-items: flex-end;
					}
					.arrow {
						width: 0;
						height: 0;
						border: 15rpx solid transparent;
						&.left {
							margin-left: 20rpx;
						}
						&.right {
							margin-right: 20rpx;
						}
					}
					.text {
						border-radius: 10px;
						padding: 0 5px;
						max-width: 80%;
						min-width: 50rpx;
						text-align: left;
						&.left {
							color: #2c405a;
						}
						&.right {
							color: #ffffff;
						}
					}
				}
			}
		}
		.foot {
			width: 100%;
			background-color: #fff;
			border-top: 1rpx solid #c7c7c7;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			.input-placeholder {
				width: 90%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				margin-top: 5px;
				margin-bottom: 5px;
				background: #eaeef1;
				border-radius: 10px;
				height: 5vh;
				&.reject {
					background: #999999;
					color: #f1f1f1;
				}
			}
		}
		.check-content{
			display: flex;
			flex-direction: column;
			font-size: 30rpx;
			position: absolute;
			top: 50vh;
			left: 0;
			right: 0;
			bottom: 0;
			.check-title{
				display: flex;
				justify-content: center;
				padding: 10rpx;
			}
			.check-item{
				display: flex;
				flex-wrap: wrap;
				.mescroll-col{
					width: 33.3%;;
					display: flex;
					.mescroll-item{
						display: flex;
						flex: 1;
						align-items: center;
						justify-content: center;
						box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
						margin: 10rpx;
						padding: 10rpx;
						color: #666;
						height: 60rpx;
					}
				}
			}
			
		}
	}
</style>
